<template>
  <span class="text_wrap" :style="getCurrentTextAlign">
    <span class="no-data" v-if="!row[managerNameField]">{{ "--" }}</span>
    <span
      v-else
      class="label"
      v-for="(itemString, i) in row[managerNameField].split(',') || []"
      :key="i"
      @click="
        jumpToFundManagerDetails(
          row[managerCodeField].split(',')[i],
          row,
          row[managerNameField].split(',')[i]
        )
      "
    >
      {{ itemString || "--" }}
      {{ i + 1 !== row[managerNameField].split(",").length ? "," : "" }}
    </span>
  </span>
</template>

<script>
import http from "@/api/http"
export default {
  name: "ManagerName",
  props: {
    row: {
      type: Object,
      required: true,
    },
    column: {
      type: Object,
      required: true,
    },
    // 基金经理名字
    managerNameField: {
      type: String,
    },
    // 基金经理
    managerCodeField: {
      type: String,
    },
  },
  computed: {
    getCurrentTextAlign() {
      let align = this.column.align ? this.column.align : ""
      let str = `text-align:${align};`
      return str
    },
  },
  methods: {
    async jumpToFundManagerDetails(managerCode, row, name) {
      let newManagerCode = managerCode
      if (this.column.hasOwnProperty("isRequest2manager")) {
        const { data } = await http.post(
          "/portfolio/fndManager/getManagerCode",
          { managerName: name, companyName: row.fundCorp }
        )
        if (data) {
          newManagerCode = data
        } else {
          return
        }
      }
      let { href } = this.$router.resolve({
        path: "manage/FundManagerDetailsIndex",
        query: {
          managerCode: newManagerCode,
          // compref: this.row.compref || '000300'
        },
      })
      this.$utils.openBlank(href, this)
    },
  },
}
</script>

<style lang="less" scoped>
@import "~@/assets/styles/themeStyle.less";
.text_wrap {
  width: 100%;
}

.no-data {
  color: @primaryTextColorBlack;
  margin-left: 4px;
}

.label {
  margin-left: 4px;
  font-size: 14px;
  color: @primaryTableHerfTextColor;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
